<template>
  <div id="qixiMyshare">
    <div class="top">
      <div class="item" @click="showRuleClick">活动规则</div>
      <div class="item" @click="showPaiClick">排行榜</div>
    </div>
    <!-- 我的录音 -->
    <div class="playVoice">
        <img :src="myVoice.headimgurl" />
        <div @click="playVoiceClick" class="voiceBg">{{myVoice.lgTime}}s</div>
    </div>
    <!-- 增加指数 -->
    <div class="addZhishu">
        <img @click="zanClick" :src="pImga"  />
        <div class="zhishu">祝福指数：9</div>
        <!-- 我也要告白-->
        <div @click="iwantClick" class="btnL">我也要告白</div>
    </div>
    <!-- 祝福小分队 -->
    <div class="zhufu">
        <div class="title">
            <div class="lineL"></div>
            <div class="text">祝福小分队</div>
            <div class="lineR"></div>
        </div>
        <div class="list">
            <div class="empty">暂时没有好友祝福，<span>点击爱心</span>送上你的祝福吧！</div>
            <div class="item" v-for="item in 10" :key="item">
                <img src=" http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJ5EibtZGtA6ianGLibbicLcYe62tLzqDXicMgwtq88GCnabU6wrO5EL95cVPSVdKDvTPehrkzO3kVopXQ/132" />
                <div class="name">排行榜</div>
                <div class="pai">100</div>
            </div>
        </div>
    </div>
    <!-- 活动规则 -->
    <qixiguide></qixiguide>
    <!-- 排行榜-->
    <qixipai></qixipai>
    <!-- 分享引导 -->
    <qixishare></qixishare>
  </div>
</template>

<script>
import Qixiguide from '@/components/common/qixguide.vue'
import Qixipai from '@/components/common/paihang.vue'
import Qixishare from '@/components/common/share2.vue'
export default {
  name: 'qixiMyshare',
  data () {
    return {
        openid: '',
        myVoice: {},
        pImga: require('../../assets/images/icon_zhan.png'),
    }
  },
  components: {
    Qixiguide,
    Qixipai,
    Qixishare
  },
  mounted(){
    
  },
  activated(){
      
    if(this.$router.query){
        this.openid = this.$router.query.openid || '';
    }
    this.wx_config();
    this.getData();
  },
  methods: {
    // 显示规则
    showRuleClick:function(){
      this.$HUB.$emit('showGuide');
    },
    // 显示排行榜
    showPaiClick: function(){
      this.$HUB.$emit('showPai');
    },
    // 我也要告白
    iwantClick: function(){
        window.location.href = 'https://dkdk.hgdqdev.cn/qixi.html';
    },
    // 帮赞点击事件
    zanClick: function(){

    },
    getData: function(){
        var self = this;
        // 获取我的录音
        self.$axios.get('getvoice',{
            params: {
                openid: self.openid || '',
            }
        }).then(function (res){
            if (res.data.status == 100) {
                self.myVoice = res.data.data;
            }
        }).catch(function (err){

        })
    },
    // 播放录音
    playVoiceClick: function(){
      var amr = new this.$BenzAMRRecorder();
      var amrUrl = this.myVoice.voiceUrl;
      amr.initWithUrl(amrUrl).then(function() {
        amr.play();
      });
      amr.onEnded(function() {
        console.log('播放完毕');
      })
    },
    // 微信配置
    wx_config: function(){
      var self = this;
      var pageUrl = self.$utils.getBaseUrl();
      self.$axios.get('wx_config2',{
        params: {
          pageUrl: pageUrl
        }
      }).then(function (res){
      	 var data = res.data;
        wx.config({
          debug: false,
          appId: data.appId,
          timestamp: data.timestamp,
          nonceStr: data.nonceStr,
          signature: data.signature,
          jsApiList: [
              'onMenuShareTimeline',
              'onMenuShareAppMessage'
            ]
        });
        wx.ready(function(){
          console.log('ready');
          self.$utils.shareData2.link = self.$utils.shareData2.link + '?openid=' + self.$utils.wxInfo.openid;
          // 微信好友分享
          wx.onMenuShareAppMessage(self.$utils.shareData2);
          // 朋友圈分享
          wx.onMenuShareTimeline(self.$utils.shareData2);
          wx.error(function(res){
    		console.log('失败');
          });
        });
      }).catch(function (error) {

      });
  	},
  },
}
</script>
<style scoped lang="less">
#qixiMyshare{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url('../../assets/images/bg03.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.top{
  color: #873636;
  font-size: 28px;
  height: 40px;
  margin-right: 40px;
  margin-top: 60px;
  .item{
    float: right;
    width: 150px;
    text-align: center;
    height: 40px;
  }
}
.playVoice{
    width: 100%;
    position: absolute;
    top: 200px;
    height: 94px;
    img {
        width: 94px;
        height: 94px;
        float: left;
        border-radius: 50%;
        margin-left: 40px;
        margin-right: 10px;
    }
    .voiceBg{
        float: left;
        width: 410px;
        height: 80px;
        line-height: 80px;
        padding-right: 40px;
        margin-top: 5px;
        background-image: url(../../assets/images/icon_play.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 453px 80px;
        color: white;
        text-align: right;
        font-size: 30px;
    }
}
.addZhishu{
    width: 100%;
    position: absolute;
    text-align: center;
    height: 200px;
    top: 320px;
    img{
        width: 110px;
        height: 110px;
    }
    .zhishu{
        color: #5d3830;
        font-family: SourceHanSansCN-Medium;
        font-size: 30px;
        width: 100%;
        margin-bottom: 40px;
    }
    .btnL{
        margin: auto;
        width: 350px;
        height: 60px;
        box-shadow: 0 0 0 1px #fdad81;
        border-radius: 30px;
        border: solid 3px white;
        background-color: #fdad81;
        border-radius: 29px;
        font-family: SourceHanSansCN-Regular;
        color: #a46340;
        font-size: 30px;
        line-height: 60px;
    }
}
.zhufu{
    position: absolute;
    top: 650px;
    width: 100%;
    .title{
        width: 100%;
        text-align: center;
        height: 40px;
        .text{
            width: 100%;
            height: 33px;
            font-family: SourceHanSansCN-Bold;
            font-size: 34px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 14px;
            letter-spacing: 0px;
            color: #59332b;
            text-align: center;
        }
    }
     .list{
        width: 605px;
        height: 422px;
        overflow-y: scroll;
        margin: auto;
        background-color: white;
        border-radius: 4px;
        padding: 0 20px;
        .empty{
            color: #59332b;
            font-family: SourceHanSansCN-Regular;
            font-size: 30px;
            margin-top: 20px;
            span{
                font-family: SourceHanSansCN-Bold;
                font-size: 30px;
                color: #ef2634;
            }
        }
        .item{
            height: 75px;
            background-color: white;
            margin-bottom: 10px;
            width: 100%;
            height: 75px;
            line-height: 75px;
            color: #59332b;
            font-size: 30px;
            border-bottom: solid 1px #dddddd;
            font-weight: 300;
            img{
                float: left;
                width: 55px;
                height: 55px;
                border-radius: 50%;
                margin-top: 10px;
                margin-left: 20px;
            }
            .name{
                float: left;
                margin-left: 20px;
                font-family: SourceHanSansCN-Regular;
                color: #59332b;
            }
            .pai{
                float: right;
                margin-right: 10px;
                padding-right: 40px;
                background-image: url(../../assets/images/icon_lave.png);
                background-position: right center;
                background-repeat: no-repeat;
                background-size: 35px 30px;
            }
        }
    }
}
</style>
